<!-- 组件模板部分，定义弹窗的 HTML 结构 -->
<template>
  <!-- 当 modelValue 为 true 时显示弹窗 -->
  <div v-if="modelValue" class="app-dialog">
    <!-- 点击遮罩层关闭弹窗 -->
    <div class="dialog-overlay" @click="closeDialog"></div>
    <!-- 弹窗内容区域，根据 width 属性设置宽度 -->
    <div class="dialog-content" :style="{ width: typeof width === 'number' ? `${width}px` : width }">
      <!-- 插槽，用于插入弹窗头部内容 -->
      <slot name="header"></slot>
      <!-- 插槽，用于插入弹窗主体内容 -->
      <slot></slot>
      <!-- 插槽，用于插入弹窗底部内容 -->
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<!-- 组件脚本部分，使用 TypeScript -->
<script lang="ts" setup>
// 从 Vue 引入 defineProps 和 defineEmits 函数
import { defineProps, defineEmits } from 'vue';

/**
 * 定义组件的属性
 * @property {boolean} modelValue - 控制弹窗显示与隐藏的属性
 * @property {number | string} width - 弹窗的宽度，支持数字和字符串类型
 */
const props = defineProps({ 
  // 控制弹窗显示与隐藏，默认值为 false
  modelValue: { type: Boolean, default: false }, 
  // 弹窗宽度，默认值为 250
  width: { type: [Number, String], default: 250 }
});

// 定义组件触发的事件
const emits = defineEmits(['update:modelValue']);

/**
 * 关闭弹窗的方法
 * 触发 'update:modelValue' 事件，将 modelValue 设置为 false
 */
const closeDialog = (): void => { 

  emits('update:modelValue', false);
};
</script>

<!-- 组件样式部分，使用 SCSS 并开启作用域 -->
<style lang="scss" scoped>
/**
 * 弹窗组件的整体样式
 * 固定定位，覆盖整个屏幕，居中显示弹窗内容
 */
.app-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  
  /**
   * 弹窗遮罩层样式
   * 半透明黑色背景，覆盖整个屏幕
   */
  .dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  /**
   * 弹窗内容区域样式
   * 白色背景，圆角边框，内边距 20px
   */
  .dialog-content {
    position: relative;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    z-index: 1001;
    width: 100%;
  }
}
</style>